<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			ul li{
				list-style: none;
			}
			.tab .item>li{
				display: inline-block;
				cursor: pointer;
			}
			.tab .item .active{
				color: red;
			}
			.tab .content>div{
				display: none;
			}
			.tab .content .show{
				display: block;
			}
		</style>
		
		
		
		<div class="tab">
			<ul class="item">
				<li class="active  aa bb">111</li>
				<li>222</li>
				<li>333</li>
			</ul>
			<div class="content">
				<div class="show">111</div>
				<div>222</div>
				<div>333</div>
			</div>
		</div>
		
		<script>
			var item = document.querySelectorAll('.tab .item>li');
			var content = document.querySelectorAll('.tab .content>div');
			// console.log(item);
			
			for(var i=0; i<item.length; i++){
				
				// 添加自定义属性
				item[i].setAttribute('suoyin', i);
				
				item[i].onclick = function(){
					// console.log(this.classList);
					// this.classList.remove('aa');
					// console.log(this.className);
					var suoyin = this.getAttribute('suoyin');
					// console.log(suoyin);
					
					for(var j=0; j<item.length; j++){
						// 删除指定的类名
						item[j].classList.remove('active');
						content[j].classList.remove('show');
					}
					
					// 添加指定类名
					this.classList.add('active');
					content[suoyin].classList.add('show');
					
				}
				
			}
		</script>
	</body>
</html>
